import { Card, Spin, Pagination, Image as AntdImage, Carousel, Tree, Space, message, Checkbox, Popconfirm, Dropdown, Menu, Row, Col } from "antd";
import { useModel, Outlet, history } from "umi";
import { Button, ButtonGroup, Card as SemiCard, List } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete } from "@douyinfe/semi-icons";

import useHelperCommoditiesClass from "../helper/useHelperCommoditiesClass";

import useAllCommoditiesClass from "../hooks/commoditiesclass/useAllCommoditiesClass";
import useDeleteCommoditiesClass from "../hooks/commoditiesclass/useDeleteCommoditiesClass";

const CommditiesPage = () => {
	const { windowInnerHeight } = useModel("global", (model) => model);
	const { openCreateCommoditiesClassModal, openCreateLowerCommoditiesClassModal } = useHelperCommoditiesClass();
	const { classifyloading, classify, loadAllCommoditiesClass } = useAllCommoditiesClass({});
	const { deleteClassify } = useDeleteCommoditiesClass();

	// 窗口头部：30，应用头：60，页头：59，操作区内边距：24，卡面头：51，卡面脚：56,修正值：4
	const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

	return (
		<Row gutter={10} style={{ padding: 10 }}>
			<Col span={5}>
				<SemiCard
					title={<span style={{ lineHeight: "32px", paddingLeft: 10, fontSize: 16, fontWeight: 600 }}>商品分类</span>}
					headerStyle={{ padding: 10 }}
					shadows="always"
					bordered={false}
					size="default"
					bodyStyle={{ padding: 0, height: cardBodyHeight }}
					headerExtraContent={
						<ButtonGroup size={"default"}>
							<Button icon={<IconPlusCircle />} onClick={() => openCreateCommoditiesClassModal({ reloadData: loadAllCommoditiesClass })}></Button>
							<Button icon={<IconRefresh />} onClick={loadAllCommoditiesClass}></Button>
						</ButtonGroup>
					}
				>
					<List
						loading={classifyloading}
						dataSource={classify}
						style={{ height: cardBodyHeight - 60, overflow: "auto" }}
						renderItem={(item, index) => {
							return index % 2 === 0 ? (
								<List.Item
									className={`list-item ${item === item ? "list-item-selected" : ""}`}
									style={{ padding: "12px 12px 12px 24px" }}
									main={item}
									extra={
										<ButtonGroup className="bnts">
											<Button icon={<IconPlusCircle />} onClick={() => openCreateLowerCommoditiesClassModal({ reloadData: loadAllCommoditiesClass, classify: item })} />
											<Button
												icon={<IconDelete style={{ color: "#E91E63" }} />}
												onClick={() =>
													deleteClassify(item, (res) => {
														if (res) {
															message.success("成功删除商品分类");
															loadAllCommoditiesClass();
														}
													})
												}
											/>
										</ButtonGroup>
									}
								/>
							) : (
								<List.Item
									className={`list-item ${item === item ? "list-item-selected" : ""}`}
									style={{ padding: "12px 12px 12px 52px" }}
									main={item}
									extra={
										<ButtonGroup className="bnts">
											<Button
												icon={<IconDelete style={{ color: "#E91E63" }} />}
												onClick={() =>
													deleteClassify(item, (res) => {
														if (res) {
															message.success("成功删除商品分类");
															loadAllCommoditiesClass();
														}
													})
												}
											/>
										</ButtonGroup>
									}
								/>
							);
						}}
					/>
				</SemiCard>
			</Col>

			<Col span={19}>
				<Outlet />
			</Col>
		</Row>
	);
};

export default CommditiesPage;
